<template>
    <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c88" text-color="#fff">
        <img src="/src/assets/images/location.png" />
        <h2>智慧交通系统</h2>
        <el-sub-menu index="1">
            <template #title>实时路况</template>
            <el-menu-item index="1-1">显示路况</el-menu-item>
            <el-menu-item index="1-2">隐藏路况</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
            <template #title>视频监控</template>
            <el-menu-item index="2-1">查看监控</el-menu-item>
            <el-menu-item index="2-2">隐藏监控</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
            <template #title>事件管理</template>
            <el-menu-item index="4-1">事件更新</el-menu-item>
            <el-menu-item index="4-2">拉框查询</el-menu-item>
            <el-menu-item index="4-3">查询所有</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="6" v-show="usertype == 'common'" >查看公告</el-menu-item>
        <el-menu-item index="7">报告路况</el-menu-item>
        <el-sub-menu index="8">
            <template #title>工具箱</template>
            <el-menu-item index="8-1">测量距离</el-menu-item>
            <el-menu-item index="8-2">测量面积</el-menu-item>
            <el-menu-item index="8-3">关闭测量</el-menu-item>
            <el-menu-item index="8-4">导出图片</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="9" v-show="usertype == 'traffic'">发布公告</el-menu-item>
        <el-menu-item index="10" v-show="usertype == 'admin'">用户管理</el-menu-item>
        <div class="search-box">
            <el-input placeholder="请输入内容" style="height: 30px; width: 200px; margin-top: 15px"
                v-model="searchName"></el-input>
            <el-button style="height: 30px; margin-top: 15px; margin-left: 10px" >查询</el-button>
        </div>
        <el-sub-menu index="5">
            <!-- <template #title>{{ username }}</template> -->
            <!-- <el-menu-item index="5-1">退出登录</el-menu-item> -->
        </el-sub-menu>
    </el-menu>
    <!-- <SearchMessage v-show="isShow"></SearchMessage> -->
</template>

<script setup>

import { ref, onMounted, inject } from 'vue'
const usertype = ref('common')
const username = ref('common')
const isShow = ref(false)
const searchName = ref('')

</script>

<style lang="scss" scoped>
.el-menu-demo {
    width: 100vw;
    position: relative;

    img {
        width: 50px;
        height: 50px;
    }

    h2 {
        color: aliceblue;
        font-size: 25px;
        margin-top: 10px;
    }

    .search-box {
        float: right;
    }
}
</style>